/*
 * @Author: your name
 * @Date: 2021-04-23 23:32:50
 * @LastEditTime: 2021-04-24 07:47:53
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \offer20k\项目代码\fantasticit\src\components\Articlecategory.tsx
 */
import React, { useEffect } from 'react'
import styles from './Airticlelist.less'
import useStore from '@/context/useStore'
import { AppstoreOutlined } from '@ant-design/icons'
import {observer} from 'mobx-react-lite'
import {useHistory} from 'umi'

const Articlecategory = () => {
    let { category } = useStore()
    const history=useHistory()

    useEffect(() => {
        //  获取标签列表
        category.getCategoryList()
    }, [])
    const getArtCategory=(value:string,count:number)=>{
      history.push(`/article/airticledetail/${value}`,{value,count})
    }
    return (
        <div className={styles.articlecategory}>
            <div className={styles.icontitle}><AppstoreOutlined /><span>文章分类</span></div>
            <div>
                <ul>
                    {
                        category.categoryList.map((item: any) => {
                            return <li key={item.id} onClick={()=>{getArtCategory(item.value,item.articleCount)}}>
                                <span>{item.label}</span>
                                <span>共 {item.articleCount} 篇文章</span>
                            </li>
                        })
                    }
                </ul>
            </div>
        </div>
    )
}
export default observer(Articlecategory);
